<template>
	<div>
		<el-card class="card-container">
			<el-form :label-position="labelPosition" label-width="200px" :model="umsPitcher">
				<el-form-item label="单账户同时可跑项目:">
					<el-input v-model="umsPitcher.run" :disabled="!editMode.run"
						style="width: 400px; text-align: right;"></el-input>
					<span>个</span>
					<el-button type="text" icon="el-icon-edit" @click="toggleEditMode('run')"></el-button>
				</el-form-item>
				<el-form-item label="单项目新建广告数:">
					<el-input v-model="umsPitcher.createAdNum" :disabled="!editMode.createAdNum"
						style="width: 400px; text-align: right;"></el-input>
					<span>个</span>
					<el-button type="text" icon="el-icon-edit" @click="toggleEditMode('createAdNum')"></el-button>
				</el-form-item>
				<el-form-item label="用户下单授权天数:">
					<el-input v-model="umsPitcher.authorizedDays" :disabled="!editMode.authorizedDays"
						style="width: 400px; text-align: right;"></el-input>
					<span>天</span>
					<el-button type="text" icon="el-icon-edit" @click="toggleEditMode('authorizedDays')"></el-button>
				</el-form-item>
				<el-form-item label="首次新建广告数:">
					<el-input v-model="umsPitcher.creatingAnAd" :disabled="!editMode.creatingAnAd"
						style="width: 400px; text-align: right;"></el-input>
					<span>个</span>
					<el-button type="text" icon="el-icon-edit" @click="toggleEditMode('creatingAnAd')"></el-button>
				</el-form-item>
				<el-form-item label="广告超过N分钟自动创建广告:">
					<el-input v-model="umsPitcher.overTime" :disabled="!editMode.overTime"
						style="width: 400px; text-align: right;"></el-input>
					<span>小时</span>
					<el-button type="text" icon="el-icon-edit" @click="toggleEditMode('overTime')"></el-button>
				</el-form-item>
				<el-form-item label="第一次缓冲暂停:">
					<el-input v-model="umsPitcher.oneBuffer" :disabled="!editMode.oneBuffer"
						style="width: 400px; text-align: right;"></el-input>
						<span>%</span>
						<el-button type="text" icon="el-icon-edit" @click="toggleEditMode('oneBuffer')"></el-button>
				</el-form-item>
				<el-form-item label="第二次缓冲暂停:">
					<el-input v-model="umsPitcher.twoBuffer" :disabled="!editMode.twoBuffer"
						style="width: 400px; text-align: right;"></el-input>
						<span>%</span>
						<el-button type="text" icon="el-icon-edit" @click="toggleEditMode('twoBuffer')"></el-button>
				</el-form-item>
				<el-form-item label="第三次缓冲暂停:">
					<el-input v-model="umsPitcher.threeBuffer" :disabled="!editMode.threeBuffer"
						style="width: 400px; text-align: right;"></el-input>
						<span>%</span>	
						<el-button type="text" icon="el-icon-edit" @click="toggleEditMode('threeBuffer')"></el-button>
				</el-form-item>
				<el-form-item label="出价:">
					<el-input v-model="umsPitcher.bid" :disabled="!editMode.bid"
						style="width: 400px; text-align: right;"></el-input>
						<span>元</span>	
						<el-button type="text" icon="el-icon-edit" @click="toggleEditMode('bid')"></el-button>
				</el-form-item>
				<el-form-item label="是否自动修改审核不过的标题:" style="width: 300px;">
					<el-switch v-model="umsPitcher.audit" :active-value="1" :inactive-value="0"></el-switch>
				</el-form-item>
				<el-form-item size="large">
					<el-button type="primary" @click="onSubmit">修改</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
	import '@/assets/css/index.css'
	import qs from 'qs'
	export default {
		data() {
			return {
				umsPitcher: {},
				editMode: { // Track edit mode for each field
					run: false,
					createAdNum: false,
					authorizedDays: false,
					creatingAnAd: false,
					overTime: false,
					audit: false,
					threeBuffer:false,
					twoBuffer:false,
					oneBuffer:false,
					bid:false
				}
			}
		},
		created() {
			this.list();
		},
		methods: {
			onSubmit() {
				let than = this;
				console.log(this.umsPitcher)
				this.$axios.post(
					'umsPitcher/updateByparameter', qs.stringify({
						audit: than.umsPitcher.audit,
						authorizedDays: than.umsPitcher.authorizedDays,
						createAdNum: than.umsPitcher.createAdNum,
						creatingAnAd: than.umsPitcher.creatingAnAd,
						id: than.umsPitcher.id,
						name: than.umsPitcher.name,
						number: than.umsPitcher.number,
						overTime: than.umsPitcher.overTime,
						run: than.umsPitcher.run,
						weight: than.umsPitcher.weight,
						threeBuffer:than.umsPitcher.threeBuffer,
						twoBuffer:than.umsPitcher.twoBuffer,
						oneBuffer:than.umsPitcher.oneBuffer,
						bid:than.umsPitcher.bid
					})
				).then((res) => {
					alert(res.data);
				});
			},

			list() {

				this.$axios.post('umsPitcher/selectById').then((res) => {
					this.umsPitcher = res.data;
					// Initialize edit mode to false for all fields
					for (let key in this.editMode) {
						this.editMode[key] = false;
					}
					console.log(res.data);
				}).catch((error) => {
					console.error('Error fetching data:', error);
				});
			},
			toggleEditMode(field) {
				this.editMode[field] = !this.editMode[field];
			}
		}
	}
</script>

<style scoped>
	.card-container {
		width: 800px;
		margin: auto;
		padding: 20px;
	}
</style>